<template>
  <ComWrapper >
    <el-alert title="支持element-plus自带图标和自定义扩展图标" type="success" style="margin-bottom:20px;"></el-alert>
    
    <el-card shadow="never">
			<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="图标" prop="icon">
					<IconSelect v-model="form.icon" clearable :disabled="disabled" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">保存</el-button>
				  <el-button @click="resetForm">重置</el-button>
					<el-button @click="setdisabled">{{disabled ? '移除禁用' : '设为禁用'}}</el-button>
				</el-form-item>
			</el-form>
		</el-card>
  </ComWrapper>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue'

const IconSelect = defineAsyncComponent(() => import('@/components/SvgIcon/IconSelect'))

const ruleFormRef = ref(null)
const disabled = ref(false)
const form = ref({icon: ''})
const rules = {
  icon: [{required: true, message: '请选择图标', trigger: 'change'}]
}

function submitForm() {
  ruleFormRef.value.validate(valid => {
    if (valid) {
      alert('请看控制台输出')
      console.log(form.value)
      
    }
  })
}
function resetForm(){
  ruleFormRef.value.resetFields()
}
function setdisabled(){
  disabled.value = !disabled.value
}
</script>
